.diagrams {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    column-gap: 0.5in;
}

.diagrams svg {
    width: 2in;
}

svg text {
    font: 40px;
    fill: black;
}

.dark svg text {
    font: 12px;
    fill: white;
}

svg rect.green {
    stroke: #1a1a1a;
    fill: #9bff01;
    stroke-width: .75px
}

svg rect.black {
    stroke: #111;
    fill: #1a1a1a;
    stroke-width: .75px
}

.dark svg rect.black {
    stroke: #DDD;
    fill: #1a1a1a;
    stroke-width: .75px
}

.dark svg rect.green {
    stroke: #DDD;
    fill: #9bff01;
    stroke-width: .75px
}

svg circle.white {
    fill: #fff;
    stroke: none
}

svg circle.black {
    fill: #000;
    stroke: none
}

svg circle.off {
    fill: none;
    stroke: none
}

.interactive-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

button {
    margin: 5px;
    border: black 2px solid;
    border-radius: 3px;
    transition: color 1s, background-color 1s;
    display: block;
}

button:hover {
    color: white;
    background-color: black;
}

.buttons {
    display: flex;
    flex-direction: row;
}